<template>
  <view class="container">
    <ve-navbar title="收款账号">
      <template #right>
        <view class="header-right" @click="addAccount">
          <text class="iconfont ve-icon-add" style="font-size: 36rpx; margin-right: 8rpx"></text>
          添加账号
        </view>
      </template>
    </ve-navbar>

    <scroll-view class="scroll-cont" scroll-y>
      <template v-for="(item, index) in backInfoList" :key="index">
        <view class="selector-item" @click="chooseItem(item)">
          <view class="selector-item_checkbox">
            <ve-icon v-if="checkId == item.id" name="icon-checkbox-select" width="28"></ve-icon>
            <ve-icon v-else name="icon-checkbox" width="28"></ve-icon>
          </view>
          <view class="selector-item_label">{{ item.inExpWayName }}</view>
          <div class="selector-item_info">
            <view class="selector-item_desc num">{{ item.bankCardNumber }}</view>
            <view class="selector-item_desc">{{ item.bank }}</view>
          </div>
        </view>
      </template>
      <ve-empty text="没有数据~" v-if="backInfoList.length == 0"></ve-empty>
    </scroll-view>
    <ve-bottom-box size="mini">
      <ve-button type="primary" @click="onConfirm" size="long">确认</ve-button>
    </ve-bottom-box>
  </view>
</template>
<script lang="ts" setup>
  import { onLoad, onUnload } from '@dcloudio/uni-app'
  import { ref } from 'vue'
  import { staffDetail, getPeerList, getSupplierList } from '@/api/cost/index'

  const backInfoList = ref<any>([])
  const collectId = ref()
  // 类型
  const orderType = ref('')
  // 获取员工银行账户信息
  const getBankList = (id: any) => {
    let handleWay = orderType.value == 'staffOrder' ? staffDetail : orderType.value == 'peerOrder' ? getPeerList : getSupplierList
    handleWay({ id }).then((res: any) => {
      const result = res.result
      backInfoList.value = result.backInfoList || []
    })
  }
  const checkId = ref()

  // 选中一个
  const chooseItem = (record: any) => {
    checkId.value = record.id
  }
  const onConfirm = () => {
    if (!checkId.value) {
      return uni.showToast({
        title: '请选择收款账户',
        icon: 'none',
      })
    } else {
      let checkedBankInfo = backInfoList.value?.find((i: any) => i.id == checkId.value)
      console.log(checkedBankInfo, 'checkedBankInfo')

      uni.setStorageSync('checkedBankInfo', checkedBankInfo)
      uni.navigateBack()
    }
  }
  const addAccount = () => {
    if (backInfoList.value?.length < 10) {
      uni.navigateTo({
        url: `/pages/operate-cost/bankInfo/add?id=${collectId.value}&orderType=${orderType.value}`,
      })
    } else {
      uni.showToast({
        title: '银行账户已达上限，无法添加',
        icon: 'none',
      })
    }
  }
  onLoad((option: any) => {
    collectId.value = option.id
    orderType.value = option.orderType
    // 已选中收款账户修改时回显选中账户
    if (option.collectBackId) {
      checkId.value = option.collectBackId
    }
    getBankList(option.id)
    // 刷新列表
    uni.$on('refreshBankData', () => {
      getBankList(option.id)
    })
  })
  onUnload(() => {
    uni.$off('refreshBankData')
  })
</script>
<style lang="less" scoped>
  .container {
    height: 100vh;
    width: 100%;
    background: #f7f8fa;

    .header {
      position: relative;
      height: 88rpx;
      background: #ffffff;
      text-align: center;
      .back-btn {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 24px;
      }

      &-right {
        display: flex;
        align-items: center;
        font-size: 30rpx;
        font-weight: 400;
        color: #165dff;

        .svg-icon {
          margin-right: 8rpx;
        }
      }
    }

    .scroll-cont {
      // padding: 1px 0;
    }
  }
  .selector-item {
    position: relative;
    background: #ffffff;
    border-radius: 8rpx;
    min-height: 108rpx;
    max-height: 204rpx;
    padding: 32rpx;
    margin: 24rpx;

    &_checkbox {
      position: absolute;
      top: 50%;
      margin-top: -20rpx;
      right: 32rpx;
    }

    &_label {
      margin-right: 64rpx;
      font-size: 30rpx;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #191c27;
      line-height: 44rpx;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    &_info {
      display: flex;
    }
    &_desc {
      margin-top: 12rpx;
      margin-right: 24px;
      font-size: 30rpx;
      font-weight: 400;
      color: #8491a8;
      line-height: 40rpx;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .num {
      color: #000000;
    }
  }
</style>
